<!DOCTYPE html>
<html>
<head>
	<#-- import macro -->
	<#import "../common/common.macro.ftl" as netCommon>

	<!-- 1-style start -->
	<@netCommon.commonStyle />
	<link rel="stylesheet" href="${request.contextPath}/static/plugins/bootstrap-table/bootstrap-table.min.css">
	<link rel="stylesheet" href="${request.contextPath}/static/adminlte/plugins/iCheck/square/blue.css">
	<!-- 1-style end -->

</head>
<body class="hold-transition" style="background-color: #ecf0f5;">
<div class="wrapper">
	<section class="content">

		<!-- 2-content start -->

		<#-- 查询区域 -->
		<div class="box" style="margin-bottom:9px;">
			<div class="box-body">
				<div class="row" id="data_filter" >
					<div class="col-xs-3">
						<div class="input-group">
							<span class="input-group-addon">${I18n.user_tips}${I18n.user_staus}</span>
							<select class="form-control status" >
								<option value="-1" >${I18n.system_all}</option>
								<#list UserStatuEnum as item>
									<option value="${item.value}" >${item.desc}</option>
								</#list>
							</select>
						</div>
					</div>
					<div class="col-xs-3">
						<div class="input-group">
							<span class="input-group-addon">${I18n.user_username}</span>
							<input type="text" class="form-control username" autocomplete="on" >
						</div>
					</div>
					<div class="col-xs-1">
						<button class="btn btn-block btn-primary searchBtn" >${I18n.system_search}</button>
					</div>
					<div class="col-xs-1">
						<button class="btn btn-block btn-default resetBtn" >${I18n.system_reset}</button>
					</div>
				</div>
			</div>
		</div>

		<#-- 数据表格区域 -->
		<div class="row">
			<div class="col-xs-12">
				<div class="box">
					<div class="box-header pull-left" id="data_operation" >
						<button class="btn btn-sm btn-info add" type="button"><i class="fa fa-plus" ></i>${I18n.system_opt_add}</button>
						<button class="btn btn-sm btn-warning selectOnlyOne update" type="button"><i class="fa fa-edit"></i>${I18n.system_opt_edit}</button>
						<button class="btn btn-sm btn-danger selectAny delete" type="button"><i class="fa fa-remove "></i>${I18n.system_opt_del}</button>
						<button class="btn btn-sm btn-primary selectOnlyOne grantAppnames" type="button">服务授权</button>
					</div>
					<div class="box-body" >
						<table id="data_list" class="table table-bordered table-striped" width="100%" >
							<thead></thead>
							<tbody></tbody>
							<tfoot></tfoot>
						</table>
					</div>
				</div>
			</div>
		</div>

		<!-- 新增.模态框 -->
		<div class="modal fade" id="addModal" tabindex="-1" role="dialog"  aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<h4 class="modal-title" >${I18n.system_opt_add}${I18n.user_tips}</h4>
					</div>
					<div class="modal-body">
						<form class="form-horizontal form" role="form" >
							<div class="form-group">
								<label for="lastname" class="col-sm-2 control-label">${I18n.user_tips}${I18n.user_username}<font color="red">*</font></label>
								<div class="col-sm-8"><input type="text" class="form-control" name="username" placeholder="${I18n.system_please_input}${I18n.user_username}" maxlength="20" ></div>
							</div>
							<div class="form-group">
								<label for="lastname" class="col-sm-2 control-label">${I18n.user_tips}${I18n.user_password}<font color="red">*</font></label>
								<div class="col-sm-8"><input type="text" class="form-control" name="password" placeholder="${I18n.system_please_input}${I18n.user_password}" maxlength="20" ></div>
							</div>
							<div class="form-group">
								<label for="lastname" class="col-sm-2 control-label">${I18n.user_tips}${I18n.user_staus}<font color="red">*</font></label>
								<div class="col-sm-4">
									<select class="form-control" name="status" >
										<#list UserStatuEnum as item>
											<option value="${item.value}" >${item.desc}</option>
										</#list>
									</select>
								</div>
							</div>
							<div class="form-group">
								<label for="lastname" class="col-sm-2 control-label">${I18n.user_real_name}<font color="red">*</font></label>
								<div class="col-sm-8"><input type="text" class="form-control" name="realName" placeholder="${I18n.system_please_input}${I18n.user_real_name}" maxlength="20" ></div>
							</div>

							<br>
							<div class="form-group">
								<label for="lastname" class="col-sm-2 control-label">用户角色<font color="red">*</font></label>
								<div class="col-sm-8">
									<#list RoleEnum as role>
										<span class="col-sm-4" style="padding-left: 0px;" ><input type="radio"  name="role" value="${role.value}"> ${role.desc}</span>
									</#list>
								</div>
							</div>

							<div class="form-group" style="text-align:center;border-top: 1px solid #e4e4e4;">
								<div style="margin-top: 10px;" >
									<button type="submit" class="btn btn-primary"  >${I18n.system_save}</button>
									<button type="button" class="btn btn-default" data-dismiss="modal">${I18n.system_cancel}</button>
								</div>
							</div>

						</form>
					</div>
				</div>
			</div>
		</div>

		<!-- 更新.模态框 -->
		<div class="modal fade" id="updateModal" tabindex="-1" role="dialog"  aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<h4 class="modal-title" >${I18n.system_opt_edit}${I18n.user_tips}</h4>
					</div>
					<div class="modal-body">
						<form class="form-horizontal form" role="form" >
							<div class="form-group">
								<label for="lastname" class="col-sm-2 control-label">${I18n.user_tips}${I18n.user_username}<font color="red">*</font></label>
								<div class="col-sm-8"><input type="text" class="form-control" name="username" placeholder="${I18n.system_please_input}${I18n.user_username}" maxlength="20" readonly ></div>
							</div>
							<div class="form-group">
								<label for="lastname" class="col-sm-2 control-label">${I18n.user_tips}${I18n.user_password}<font color="black">*</font></label>
								<div class="col-sm-8"><input type="text" class="form-control" name="password" placeholder="${I18n.user_password_update_placeholder}" maxlength="20" ></div>
							</div>
							<div class="form-group">
								<label for="lastname" class="col-sm-2 control-label">${I18n.user_tips}${I18n.user_staus}<font color="red">*</font></label>
								<div class="col-sm-4">
									<select class="form-control" name="status" >
										<#list UserStatuEnum as item>
											<option value="${item.value}" >${item.desc}</option>
										</#list>
									</select>
								</div>
							</div>
							<div class="form-group">
								<label for="lastname" class="col-sm-2 control-label">${I18n.user_real_name}<font color="red">*</font></label>
								<div class="col-sm-8"><input type="text" class="form-control" name="realName" placeholder="${I18n.system_please_input}${I18n.user_real_name}" maxlength="20" ></div>
							</div>

							<br>
							<div class="form-group">
								<label for="lastname" class="col-sm-2 control-label">用户角色<font color="red">*</font></label>
								<div class="col-sm-8">
									<#list RoleEnum as role>
										<span class="col-sm-4" style="padding-left: 0px;" ><input type="radio"  name="role" value="${role.value}"> ${role.desc}</span>
									</#list>
								</div>
							</div>

							<div class="form-group" style="text-align:center;border-top: 1px solid #e4e4e4;">
								<div style="margin-top: 10px;" >
									<button type="submit" class="btn btn-primary"  >${I18n.system_save}</button>
									<button type="button" class="btn btn-default" data-dismiss="modal">${I18n.system_cancel}</button>
									<input type="hidden" name="id" >
								</div>
							</div>

						</form>
					</div>
				</div>
			</div>
		</div>

		<!-- 服务授权.模态框 -->
		<div class="modal fade" id="grantAppnamesModal" tabindex="-1" role="dialog"  aria-hidden="true">
			<div class="modal-dialog <#--modal-lg-->">
				<div class="modal-content">
					<div class="modal-header">
						<h4 class="modal-title" >服务授权</h4>
					</div>
					<div class="modal-body">
						<form class="form-horizontal form" role="form" >
							<div class="table-responsive">
								<table class="table table-bordered" width="100%" >
									<thead>
									<tr>
										<th>AppName</th>
										<th>服务名称</th>
										<th>授权</th>
									</tr>
									</thead>
									<tbody>
									<#if applicationList?exists>
										<#list applicationList as application>
											<tr>
												<td>${application.name}</td>
												<td>${application.appname}</td>
												<td>
													<input type="checkbox" name="application" value="${application.appname}" >
												</td>
											</tr>
										</#list>
									</#if>
									</tbody>

								</table>
							</div>

							<div class="form-group">
								<div class="text-center">
									<button type="button" class="btn btn-primary ok" >保存</button>
									<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>

									<input type="hidden" name="username"  >
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>

		<!-- 2-content end -->

	</section>
</div>

<!-- 3-script start -->
<@netCommon.commonScript />
<script src="${request.contextPath}/static/plugins/bootstrap-table/bootstrap-table.min.js"></script>
<script src="${request.contextPath}/static/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
<script src="${request.contextPath}/static/adminlte/plugins/iCheck/icheck.min.js"></script>
<#-- admin table -->
<script src="${request.contextPath}/static/biz/common/admin.table.js"></script>
<script>
	$(function() {

		/**
		 * init table
		 */
		$.adminTable.initTable({
			table: '#data_list',
			url: base_url + "/user/pageList",
			queryParams: function (params) {
				var obj = {};
				obj.username = $('#data_filter .username').val();
				obj.status = $('#data_filter .status').val();
				obj.offset = params.offset;
				obj.pagesize = params.limit;
				return obj;
			},
			columns:[
				{
					checkbox: true,
					field: 'state',
					width: '5',
					widthUnit: '%',
					align: 'center',
					valign: 'middle'
				}, {
					title: I18n.user_username,
					field: 'username',
					width: '30',
					widthUnit: '%',
					align: 'left'
				},{
					title: I18n.user_password,
					field: 'password',
					width: '20',
					widthUnit: '%',
					align: 'left',
					formatter: function(value) {
						return '*********';
					}
				}, {
					title: '真实姓名',
					field: 'realName',
					width: '25',
					widthUnit: '%',
					align: 'left'
				}, {
					title: '启用状态',
					field: 'status',
					width: '20',
					widthUnit: '%',
					align: 'left',
					formatter: function(value) {
						var result = "";
						$('#data_filter .status option').each(function(){
							if ( value.toString() === $(this).val() ) {
								result = $(this).text();
							}
						});
						return result;
					}
				}
			]
		});

		/**
		 * init delete
		 */
		$.adminTable.initDelete({
			url: base_url + "/user/delete"
		});

		/**
		 * init add
		 */
		jQuery.validator.addMethod("usernameValid", function(value, element) {
			var length = value.length;
			var valid = /^[a-z][a-z0-9]*$/;
			return this.optional(element) || valid.test(value);
		}, I18n.user_username_valid );
		$.adminTable.initAdd( {
			url: base_url + "/user/add",
			rules : {
				username : {
					required : true,
					rangelength:[4, 20],
					usernameValid: true
				},
				password : {
					required : true,
					rangelength:[4, 20]
				},
				realName : {
					required : true,
					rangelength:[2, 20]
				}
			},
			messages : {
				username : {
					required : I18n.system_please_input + I18n.user_username,
					rangelength: I18n.system_lengh_limit + "[4-20]"
				},
				password : {
					required : I18n.system_please_input + I18n.user_password,
					rangelength: I18n.system_lengh_limit + "[4-20]"
				},
				realName : {
					required : I18n.system_please_input + I18n.user_real_name,
					rangelength: I18n.system_lengh_limit + "[2-20]"
				}
			},
			writeFormData: function() {
				// write default data
				$('#addModal .form input[name="roleId"]').prop('checked', false).iCheck('update');
			},
			readFormData: function() {

				// request
				return {
					"username": $("#addModal .form input[name=username]").val(),
					"password": $("#addModal .form input[name=password]").val(),
					"status": $("#addModal .form select[name=status]").val(),
					"realName": $("#addModal .form input[name=realName]").val(),
					"role": $('#addModal .form input[name="role"]:checked').val()
				};
			}
		});

		/**
		 * init update
		 */
		$.adminTable.initUpdate( {
			url: base_url + "/user/update",
			writeFormData: function(row) {

				// base data
				$("#updateModal .form input[name='id']").val( row.id );
				$("#updateModal .form input[name='username']").val( row.username );
				$("#updateModal .form input[name='password']").val( '' );
				$("#updateModal .form select[name='status']").val( row.status );
				$("#updateModal .form input[name='realName']").val( row.realName );
				$('#updateModal .form input[name="role"][value="'+ row.role +'"]').prop('checked', true).iCheck('update');
			},
			rules : {
				realName : {
					required : true,
					rangelength:[2, 20]
				}
			},
			messages : {
				realName : {
					required : I18n.system_please_input + I18n.user_real_name,
					rangelength: I18n.system_lengh_limit + "[2-20]"
				}
			},
			readFormData: function() {
				// request
				return {
					"id": $("#updateModal .form input[name=id]").val(),
					"username": $("#updateModal .form input[name=username]").val(),
					"password": $("#updateModal .form input[name=password]").val(),
					"status": $("#updateModal .form select[name=status]").val(),
					"realName": $("#updateModal .form input[name=realName]").val(),
					"role": $('#updateModal .form input[name="role"]:checked').val()
				};
			}
		});


		// ---------- ---------- ---------- grant appnames ---------- ---------- ----------

		$("#data_operation .grantAppnames").click(function(){
			// get select rows
			var rows = $.adminTable.table.bootstrapTable('getSelections');
			// find select row
			if (rows.length !== 1) {
				layer.msg(I18n.system_please_choose + I18n.system_one + I18n.system_data);
				return;
			}
			var row = rows[0];

			// fill data
			$("#grantAppnamesModal .form input[name='username']").val(row.username)
			var appnameDataChoose;
			if (row.appnames) {
				appnameDataChoose = $(row.appnames.split(","));
			}
			$("#grantAppnamesModal .form input[name='application']").each(function () {
				if ( $.inArray($(this).val(), appnameDataChoose) > -1 ) {
					$(this).prop("checked",true).iCheck('update');
				} else {
					$(this).prop("checked",false).iCheck('update');
				}
			});

			// show
			$('#grantAppnamesModal').modal({backdrop: false, keyboard: false}).modal('show');
		});
		$('#grantAppnamesModal .ok').click(function () {

			// find select application arr
			var username = $("#grantAppnamesModal .form input[name='username']").val();
			var selectedApplications = [];
			$('#grantAppnamesModal .form input[name="application"]:checked').each(function () {
				selectedApplications.push($(this).val());
			});

			// post
			$.post(base_url + "/user/grantAppnames",
				{
					username: username,
					appnames: selectedApplications.join(",")
				},
				function(data, status) {
					if (data.code == 200) {
						layer.open({
							icon: '1',
							content: '操作成功' ,
							end: function(layero, index){
								$('#grantAppnamesModal').modal('hide');

								// refresh
								$('#data_filter .searchBtn').click();
							}
						});
					} else {
						layer.open({
							icon: '2',
							content: (data.msg||'操作失败')
						});
					}
				});
		});
		$("#grantAppnamesModal").on('hide.bs.modal', function () {
			$("#grantAppnamesModal .form")[0].reset();
			$("#grantAppnamesModal .form .form-group").removeClass("has-error");
		});

		// ---------- ---------- ---------- iCheck ---------- ---------- ----------

		// input iCheck
		$('#updateModal, #addModal').find('input').iCheck({
			checkboxClass: 'icheckbox_square-blue',
			radioClass: 'iradio_square-blue',
		});

	});
</script>
<!-- 3-script end -->

</body>
</html>